<template>
<div>
  <span v-if='flag'>
    <div  ref="modifyObj" style="height: 300px"></div>
  </span>
  <a-empty v-else style='height:300px'></a-empty>
</div>

</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    isSmooth: {
      type: Boolean,
      default:false
    },    
    lineData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    selectedStatus: { 
      type: Object,
      default: () => {
        return {}
      }
    } 
  },
  data() {
    return {
      pieLegend: null,
      xAxisData: null,
      seriesData: null,
      legendData: null,
      flag:false
    }
  },
  created() {

  },
  watch: {
    lineData: function (newData) {
      console.log('newData==>>>',newData)
      if (newData) {
        if(Object.keys(newData).length==0) return this.flag = false
        this.flag = true
        this.xAxisData = Object.keys(newData)
        console.log('xAxisData==>>>', this.xAxisData)

        this.$nextTick(() => {
          this.seriesData = []
          let dataList = Object.values(newData)
          console.log('dataList==>>>',dataList)

          dataList.forEach(item => {
            for (let key in item) {
              let newItem = this.seriesData.find(i => i.name == key)
              if (!newItem) {
                this.seriesData.push({
                  name: key,
                  type: 'line',
                  step: this.isSmooth?'':'middle',
                  smooth:this.isSmooth,
                  // stack: 'Total',
                  data: [...item[key]]
                })
              } else {
                newItem.data.push(...item[key])
              }
            }

          })

          this.legendData = this.seriesData.map(e => e.name)
          console.log("seriesData==>", this.seriesData)
          console.log("legendData==>", this.legendData)

          this.getLine()
        });
      } else {
        this.flag = false
      }
    },
  },
  mounted() {
    // this.getLine()
  },
  methods: {
    // 折线图
    getLine() {
      let that =this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.modifyObj);

      // 绘制图表，this.echarts1_option是数据
      let option = {
        // title:{
        //   text:'图形报表',
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // y: 'top',
          bottom:'0',
          x: 'center',
          data:this.legendData||['SIG开门指令','SIG关门指令','关闭且锁紧','互锁解除'],
          selected:this.selectedStatus
        },
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     start: 70,
        //     end: 100,
        //     xAxisIndex: [0],
        //   }
        // ],        
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData || ['周一', '周二', '周三', '周四', '周五','周六', '周日'],
          axisLabel:{
            show:true,
            rotate:0,
            showMaxLabel: true,
            formatter:(_,index)=>{
              if(index==0){
                return this.xAxisData[0].slice(0,-4).split(" ").join("\n")
              } else if(index == this.xAxisData.length-1){
                return this.xAxisData[this.xAxisData.length-1].slice(0,-4).split(" ").join("\n")
              }
            }
          }
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '10%',
          top:'5%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          splitNumber:1,
          min:0
        },
        series: this.seriesData || [
            {
              name:'SIG开门指令',
              type:'line',
              step: '',
              smooth:true,
              data: [0, 1, 1, 1, 0, 0]
            },
            {
              name:'SIG关门指令',
              type:'line',
              step: '',
              smooth:true,
              data: [0, 1, 1, 1, 0, 0]
            },
            {
              name:'关闭且锁紧',
              type:'line',
              step: '',
              smooth:true,
              data: [0, 1, 1, 1, 0, 0]
            },
            {
              name:'互锁解除',
              type:'line',
              step: '',
              smooth:true,
              data: [0, 1, 1, 1, 0, 0]
            }            
          ],        
      };
      myChart.on('legendselectchanged',(val)=>{
        // console.log('legend>>>>',val.selected)
        that.$emit('getLegendStatus',val.selected)
      })      
      myChart.setOption(option, true);
    }

    // 使用刚指定的配置项和数据显示图表。
    // },
  }
}
</script>